<template>
  <div class="detail">
    <back-header></back-header>
    <van-swipe
      class="my-swipe"
      ref="swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="expe">
      <h5>{{ detailObj.basicInfo?.name }}</h5>
      <p>{{ detailObj.basicInfo?.characteristic }}</p>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <span> 原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span class="right">库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <detail-title @childTab="tab"></detail-title>
    <div v-show="checkIndex == 0" v-html="detailObj.content"></div>
    <div v-show="checkIndex == 1">
      <van-empty description="暂无数据" />
    </div>
  </div>
  <van-action-sheet v-model:show="show" title=" ">
    <div class="foot-top">
       <img :src="detailObj.basicInfo?.pic" alt="">
       <section>
         <p>{{detailObj.basicInfo?.name}}</p>
         <p class="ft-tp-ft">￥{{detailObj.basicInfo?.minPrice}}</p>
       </section>
    </div>
    <ul>
      <li v-for="(item,index) in detailObj.properties" :key="index">
         <h6>{{item.name}}</h6>
         <ol>
           <li ></li>
         </ol>
      </li>
    </ul>
  </van-action-sheet>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon
      :icon="showStart ? 'star' : 'star-o'"
      :text="showStart ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="showStart = !showStart"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button type="danger" text="加入购物车" />
  </van-action-bar>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { detail } from "../../api/second/index";
import backHeader from "../../components/backHeader.vue";
import DetailTitle from "../../components/detailTitle.vue";
export default {
  components: { backHeader, DetailTitle },
  setup() {
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      detailObj: {}, // 详情页面的数据
    });
    const checkIndex = ref(0);
    const showStart = ref(false); // 是否收藏

    const show = ref(true); // 动作面板是否展示

    detail({ id: id }).then((res) => {
      // 详情页面的接口
      data.detailObj = res.data;
    });
    const tab = (i) => {
      // 商品介绍切换的函数
      checkIndex.value = i;
    };
    return {
      ...toRefs(data),
      tab,
      checkIndex,
      showStart,
      show
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
}
.my-swipe {
  img {
    width: 100%;
    height: 375px;
  }
}
.expe {
  background: #fff;
  padding: 0 10px;
  overflow: hidden;
  margin-top: -1px;
  h5 {
    font-size: 16px;
    margin: 15px 0;
  }
  p {
    color: #999999;
    font-size: 13px;
    margin-bottom: 15px;
  }
  section {
    font-size: 14px;
    color: #999999;
    margin-bottom: 5px;
    .right {
      float: right;
    }
  }
}
.foot-top{
  padding: 10px;
  display: flex;
  border-bottom: 1px solid #000;
  img{
    height: 62px;
    width: 62px;
  }
  section{
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
    .ft-tp-ft{
      margin-top: 30px;
      color: red;
    }
  }
}
</style>